<template>
  <div class="endorsement-p">
    <Banner />

    <div class="endorsement-page" v-if="endorsement">
      <!-- Logo和标题容器 -->
      <div class="title-logo-container">
        <!-- 圆形Logo图片 -->
        <div class="logo-container" v-if="endorsement && endorsement.imageUrl">
          <img :src="endorsement.imageUrl" alt="Brand Logo" class="brand-logo" />
        </div>

        <!-- 标题 -->
        <h1 class="endorsement-title">{{ endorsement.name }}</h1>
      </div>

      <!-- 时间 -->
      <p class="endorsement-date">
        代言时间：{{ endorsement.endorseDate }}
      </p>

      <!-- 详情图片 (detailImage) -->
      <div class="endorsement-detail-image" v-if="endorsement.detailImage">
        <img :src="endorsement.detailImage" :alt="endorsement.name + '详情图片'" />
      </div>

      <!-- 描述 -->
      <div class="endorsement-description" v-html="endorsement.introduce"></div>

      <!-- 视频 -->
      <div class="endorsement-video" v-if="endorsement.videoUrl">
        <video :src="endorsement.videoUrl" controls class="video-player">
          您的浏览器不支持 HTML5 视频标签。
        </video>
      </div>
    </div>

    <div v-else class="no-data">
      <p>未找到相关代言信息</p>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: 'Endorsement'
})

import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getEndorsementById } from '@/api/endorsements'
import Banner from '@/components/Banner.vue'

const route = useRoute()
const endorsement = ref(null)
const loading = ref(false)
const error = ref(null)

const loadData = async (id) => {
  if (!id) {
    error.value = '无效的ID'
    return
  }

  loading.value = true
  error.value = null

  try {
    const response = await getEndorsementById(id)
    endorsement.value = response.data.data
  } catch (err) {
    console.error('获取代言详情失败:', err)
    error.value = '获取代言详情失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  if (route.params.id) {
    loadData(route.params.id)
  }
})

watch(
    () => route.params.id,
    (newId) => {
      if (newId) {
        loadData(newId)
      }
    }
)
</script>

<style scoped>
.endorsement-p {
  padding-top: 80px;
}

.endorsement-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Logo和标题容器 */
.title-logo-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}

/* 圆形Logo样式 */
.logo-container {
  flex-shrink: 0;
}

.brand-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* 使Logo变为圆形 */
  object-fit: cover; /* 确保图片在圆形中正确显示 */
  display: block;

}

.endorsement-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0; /* 移除原来的底部间距 */
}

.endorsement-date {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 20px;
}

.endorsement-detail-image {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 20px;
}

.endorsement-detail-image img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

.endorsement-description {
  text-indent: 2em;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 30px;
}

.endorsement-video {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 40px;
}

.video-player {
  width: 100%;
  max-height: 500px;
  border-radius: 8px;
}

.no-data {
  text-align: center;
  padding: 50px 20px;
  color: #999;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .endorsement-page {
    padding: 10px;
  }

  .title-logo-container {
    gap: 15px;
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-logo {
    width: 60px;
    height: 60px;
  }

  .endorsement-title {
    font-size: 1.5rem;
  }

  .endorsement-description {
    font-size: 1rem;
  }

  .video-player {
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  .brand-logo {
    width: 50px;
    height: 50px;
  }

  .title-logo-container {
    gap: 10px;
  }
}
</style>
